
<template>
  <div class="customerChurn_container">
    <el-form :inline="true" :model="formInline" class="main_searchBar">
      <el-form-item label="月份:">
        <el-date-picker size="mini" v-model="formInline.month" value-format="yyyyMM" type="month" placeholder="选择月" :picker-options="pickerOptions"></el-date-picker>
      </el-form-item>
      <el-form-item label="区域:">
        <dx-cascader :area_id.sync="formInline.areaId" ref="cascader" />
      </el-form-item>
      <el-form-item label="客户群:">
        <el-select size="mini" v-model="formInline.custFlg" clearable>
          <el-option v-for="(item, index) in customerList1" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户名称:">
        <el-input type="text" size="mini" placeholder="输入客户名称" v-model="formInline.custName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" @click="search()" type="primary" id="search_btn">查询</el-button>
        <el-button size="mini" type="success" id="export_btn" @click="handle_export">导出</el-button>
      </el-form-item>
    </el-form>
    <header>
      <p>流失客户</p>
    </header>
    <ux-grid size="mini" id="tablePx" ref="tablePx" :header-row-style="{ background: '#eef1f6' }" border :stripe="true" :widthResize="true" :height="height" style="width: 100%" v-loading="showTableLoading" show-overflow="tooltip" show-header-overflow="title">
      <ux-table-column type="index" width="60" title="序号" fixed="left" align="center" />
      <ux-table-column :field="item.name" :title="item.data" min-width="130" v-for="(item, index) in columns" :key="index" :fixed="item.fixed &&'left'"></ux-table-column>
    </ux-grid>
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="formInline.pageNum" :page-sizes="[100, 200, 400, 800, 1600,10000]" :page-size="formInline.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
import { $budgetAPI, $budget } from "@/api";
import qs from "qs";
import { getCookie, setCookie } from "@/common/js/cookie";
import prefixAPI from "@/api/prefixAPI"; // prefixAPI 前缀
const url = prefixAPI.pack;
import {
  setSessionStorage,
  getSessionStorage,
  removeSessionStorage,
} from "@/common/js/storage";
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      formInline: {
        areaId: "",
        month: "",
        pageNum: 1,
        pageSize: 100,
        custName: "",
        custFlg: "",
      },
      total: 0,
      pickerOptions: this.pickerDisabled(),
      disabledTime: "",
      showTableLoading: false,
      height: window.innerHeight - 60 - 30 - 175,
      tableData: [],
      columns: [],
      customerList1: [
        {
          indexName: "全部",
          indexCode: "",
        },
        {
          indexName: "公众",
          indexCode: "公众",
        },
        {
          indexName: "政企",
          indexCode: "政企",
        },
      ],
    };
  },
  methods: {
    getHeight() {
      this.height = window.innerHeight - 60 - 30 - 175;
    },
    getMonth() {
      $budgetAPI.incomeKeepRegionalMonth(
        { maximum: 12 },
        (res) => {
          if (res.code == 0) {
            this.formInline.month = res.content;
            this.disabledTime = res.content;
            this.getInitList();
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getInitList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getInitList();
    },
    pickerDisabled() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.disabledTime) {
            var timeyear = time.getFullYear();
            var timemonth = time.getMonth() + 1;
            if (timemonth >= 1 && timemonth <= 9) {
              timemonth = "0" + timemonth;
            }
            var currentdate = timeyear.toString() + timemonth.toString();
            if (currentdate > self.disabledTime) {
              return true;
            }
          }
        },
      };
    },
    // 初始化列表接口
    getInitList() {
      this.showTableLoading = true;
      $budgetAPI.customerChurn(
        this.formInline,
        (res) => {
          if (res.code == 0) {
            const { titles, data, total } = res.content;
            this.tableData = data;
            // this.columns = JSON.stringify(JSON.parse(titles));
            this.columns = titles;
            this.total = total;
            this.$refs.tablePx.reloadData(this.tableData);
          } else {
            this.tableData = [];
            this.$refs.tablePx.reloadData([]);
            this.total = 0;
          }
          this.showTableLoading = false;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    search() {
      this.getInitList();
    },
    handle_export() {
      const { formInline } = this;
      var params = {
        ...formInline,
        token: getCookie("token"),
      };
      window.open(
        `${url}/incomeView/getCustLostFeeExport?${qs.stringify(params)}`,
        "_self"
      );
    },
  },
  created() {
    // debugger
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.formInline.areaId = this.accountInfo.areaId;
    this.getMonth();
    window.addEventListener("resize", this.getHeight);
  },
  destroyed() {
    // 计算高度
    window.removeEventListener("resize", this.getHeight);
  },
};
</script>

<style lang="scss" scoped>
.customerChurn_container {
  width: 100%;
  height: 100%;
  & > header {
    font-size: 16px;
    margin-bottom: 10px;
  }
  .page_box {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
